/**
 * eadmin / www.eadmin.net
 * 
 * 表单
 */

 @import "../global";

::-webkit-input-placeholder
{
    color:@color-7;
}
:-moz-placeholder
{
    color:@color-7;
}
::-moz-placeholder
{
    color:@color-7;
}
:-ms-input-placeholder
{
    color:@color-7;
}
input,
textarea
{
    .border-radius();
    padding: 10px;
    border:1px @input-color-1 solid;
    background: @input-color-3;
    width: 100%;
    color: @font-color-1;
}
input,
textarea
{
    .animate-form();
}
input:focus,
textarea:focus
{
    .animate-form();
    .box-shadow();
    outline: none;
    border-color: @color-3;
    background: @input-color-4;
}
input:disabled,
textarea:disabled
{
    cursor: not-allowed;
    background: @input-color-2;
    border-color: @input-color-2;
}
input:disabled::-webkit-input-placeholder,
textarea:disabled::-webkit-input-placeholder
{
    color:@input-color-5;
}
input:disabled:-moz-placeholder,
textarea:disabled::-webkit-input-placeholder
{
    color:@input-color-5;
}
input:disabled::-moz-placeholder,
textarea:disabled::-webkit-input-placeholder
{
    color:@input-color-5;
}
input:disabled:-ms-input-placeholder,
textarea:disabled::-webkit-input-placeholder
{
    color:@input-color-5;
}
label
{
    position: relative;
}
textarea
{
    cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.no-resize
{
    resize: none;
}
.icon-input,
.icon-input-right,
.success-input,
.error-input,
.notice-input
{
    i:not(.add):not(.cut)
    {
        position: absolute;
        top: 1px;
    }
}
.icon-input:not(.error-input):not(.success-input):not(.notice-input)
{
    input
    {
        padding-left: 26px;
    }
    i
    {
        left:10px;
    }
}
.icon-input-right
{
    input
    {
        padding-right: 24px;
    }
    i
    {
        margin-right: 0;
        right: 10px;
    }
}
.success-input,
.error-input,
.notice-input
{
    .animate-form();
    input
    {
        padding-right: 24px;
    }
    i:not(.add):not(.cut)
    {
        right: 10px;
        font-size: 16px;
        top: 0;
        margin-right: 0;
    }
}
.success-input
{
    input,
    textarea
    {
        border-color: @mcolor-2;
        background-color: #234824;
    }
    input:focus,
    textarea:focus
    {
        background: #234824;
    }
    i:not(.add):not(.cut)
    {
        color: @mcolor-2;
    }
}
.error-input
{
    input,
    textarea
    {
        border-color: @mcolor-1;
        background: #482323;
    }
    input:focus,
    textarea:focus
    {
        background: #482323;
    }
    i:not(.add):not(.cut)
    {
        color: @mcolor-1;
    }
}
.notice-input
{
    input,
    textarea
    {
        border-color: @mcolor-3;
        background: #4c4728;
    }
    input:focus,
    textarea:focus
    {
        background: #4c4728;
    }
    i:not(.add):not(.cut)
    {
        color: @mcolor-3;
    }
}
input[type="radio"],
input[type="checkbox"],
select
{
    border:0;
    position:absolute;
    left:-9999px;
}
select
{
    min-width: 120px;
}
.radio,
.radio-disabled,
.radio-checked,
.radio-disabled-checked,
.checkbox,
.checkbox-disabled,
.checkbox-checked,
.checkbox-disabled-checked
{
    margin-right: 10px;
    line-height: 40px;
    display: inline-block;
    i
    {
        font-size: 18px;
        margin-right: 0;
        font-weight: bold;
    }
}
.radio,
.checkbox,
.checkbox-checked
{
    cursor: pointer;
}
.radio-disabled,
.radio-disabled-checked,
.checkbox-disabled,
.checkbox-disabled-checked
{
    color: @color-6;
    cursor: not-allowed;
}
.radio,
.checkbox
{
    i
    {
        .animate(color);
    }
}
.radio-checked,
.checkbox-checked
{
    i
    {
        .animate(color);
        color: @color-3;
    }
}
.select
{
    .border-radius();
    .animate-form();
    padding: 10px;
    border:1px @input-color-1 solid;
    background: @input-color-3;
    display: inline-block;
    padding-right: 30px;
    position: relative;
    cursor: pointer;
    margin-right: 5px;
    min-width: 100px;
    i:not(.rotate)
    {
        position: absolute;
        right: 0px;
    }
}
.select-disabled
{
    cursor: not-allowed;
    background: @input-color-2;
    border-color: @input-color-2;
    span, i
    {
        color: @input-color-5;
    }
    i
    {
        font-size: @font-size-2;
    }
}
.select-option
{
    .border-radius();
    .box-shadow();
    display: none;
    position: absolute;
    border:1px @input-color-1 solid;
    background: @input-color-3;
    margin-top: 5px;
    outline: none;
    z-index: 9999;
    cursor: pointer;
    ul
    {
        padding: 6px;
        position: relative;
        max-height: 240px;
        li
        {
            padding: 5px 10px;
            cursor: pointer;
            &:hover
            {
                .border-radius();
                background: @color-5;
            }
        }
        li:not(:last-child)
        {
            margin-bottom: 4px;
        }
        .active
        {
            .border-radius();
            background: @color-5;
        }
    }
    .disabled
    {
        color: @color-6;
        cursor: not-allowed;
        &:hover
        {
            background: @input-color-3;
        }
    }
}
.checkbox-switch
{
    .border-radius(50px);
    background: @color-7;
    width: 44px;
    height: 22px;
    cursor: pointer;
    padding: 3px;
    display: inline-block;
    span
    {
        .animate(margin-left);
        .border-radius(50px);
        background: @font-color-1;
        width:16px;
        height: 16px;
        display: inline-block; 
    }
}
.switch-open
{
    .linear();
    span
    {
        .box-shadow();
        .animate(margin-left);
        margin-left: 22px;
    }
}
.switch-disabled
{
    cursor: not-allowed;
    background: @input-color-2;
}